<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
        <title>
            个人中心
        </title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    
        </script>
        <!-- 引入 layui.css -->
    <link href="./css/layui.css" rel="stylesheet" />

    <!-- 引入 layui.js -->
    <script src="./js/layui.js"></script>
    <script src="./js/utils.js"></script>
    <script src="./js/constant.js" ></script>
    <script src="./js/data.js"></script>
    <script src="./js/userAuth.js"></script>
    <script src="./js/request.js"></script>
        <script type="text/javascript">
            function loadData(){
                $.ajax({
                    url : REQUEST_URL,
                    method:"post",
                    type : "json",contentType:"application/json",
                    data:JSON.stringify({action : "GetCustomerOrderCount"}),
                    headers:REQUEST_HEADERS(),
                    success:function(r,t,x){
                        const res = responseHandler(r,t,x);
                        console.log(res)
                        if(res.code == 200){
                            saveMineData(res)
                            render(res);
                        }
                    }
                })
                $.ajax({
                    url : REQUEST_URL,
                    method:'post',
                    type : "json",
                    contentType : "application/json",
                    data:JSON.stringify({action : "GetCustomerInfo"}),
                    headers : REQUEST_HEADERS(),
                    success:function(r,t,x){
                        console.log('userinfo ',r)
                        try{
                            if(r.code == 200 && r.list[0].Rows[0]){
                                const {
                                    headimgurl,
                                    ZXLX,
                                    companyname,
                                    mobilephone,
                                    username
                                } = r.list[0].Rows[0];
                                $("#avatar").attr('src',headimgurl);
                                $("#name").text(username)
                                $("#companyName").text(companyname);
                                $("#mobile").text(mobilephone);
                            }else{

                            }
                        }catch(err){
                            layer.msg(err)
                        }
                    }
                })
            }

            function toConfirmList(){
                location.href=CONFIRM_RECEIVE_LIST_PAGE
            }

            function toAddCommand(){
                location.href=ADD_COMMAND_PAGE;
            }


            function initial(){
                const tmp = getMineData();
                render(tmp)
            }
            function toCompanyList(){
                location.href=COMPANY_LIST_PAGE
            }
            function toAllow(){
                location.href=ALLOW_GET_PRODUCT_LIST_PAGE;
            }
            function render(pageData){
                console.log('pagedata',pageData)
                if(!!pageData){
                    const {ddDqrNum,ddQbNum,ddYqrNum,shqrNum,sqgsNum,thzlNum,yxthNum} = pageData.list[0].Rows[0];
                            
                            $("#DQR").text(ddDqrNum)
                        
                            $("#QB").text(ddQbNum)
                        
                        
                            $("#YQR").text(ddYqrNum)
                        
                        
                        if(shqrNum!=0){
                            $("#shqr").text(shqr)
                            $("#shqr").css({"display":""})
                        }else{
                            $("#shqr").css({"display":"none"})
                        }
                        if(sqgsNum!=0){
                            $("#sqgs").text(sqgsNum)
                            $("#sqgs").css({"display":""})
                        }else{
                            $("#sqgs").css({"display":"none"})
                        }
                        if(thzlNum!=0){
                            $("#thzl").text(thzlNum)
                            $("#thzl").css({"display":""})
                        }else{
                            $("#thzl").css({"display":"none"})
                        }
                        if(yxthNum!=0){
                            $("#yxth").text(yxthNum)
                            $("#yxth").css({"display":""})
                        }else{
                            $("#yxth").css({"display":"none"})
                        }
                }
            }

            function toCommandList(){
                location.href=COMMAND_LIST_PAGE
            }

            function toMyInfo(){
                location.href = MY_INFO_PAGE;
            }
            $(document).ready(()=>{
                init();
                initial()
                loadData();
                setInterval(() => {
                    loadData()
                }, 5000);
                const toNext = getRedirect()
                if(toNext){
                    clearRedirect();
                    setTimeout(() => {
                        location.href=toNext;    
                    }, 500);
                    
                    
                }
            })
        </script>
    </head>
    <style>
        .count-item {
            display: flex;
            flex:1;
            height: 45px;
            /* width: 33%; */
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color:white
        }
        .border-right {
            /* width: 1px;
            background-color: white;
            height: 25px; */
            border-right: 1px solid white;
        }
        body {
            background-color: rgb(244,244,244);
        }
    </style>
    <body>
        <!-- 头部 -->
        <div style="background-color: black;width: 100%;height: 200px;"> 
        <div style="display: flex;flex-direction: row;background-color: black;height: 143px;align-items: center;padding: 0px 10px;">
            <!-- 头像 -->
            <div style="width: 60px;display: flex;justify-content: center;align-items: center;">
                <img id="avatar" src="" style="width:60px;height:60px;border-radius: 30px;background-color: white;overflow: hidden;"/>
            </div>
            <!-- 文字 -->
            <div style="display: flex;flex:1;flex-direction: column;margin-left: 10px;">
                <div id="name" style="font-size: 22px;color:white;"></div>
                <div id="companyName" style="font-size: 13px;color:white;"></div>
                <div id="mobile" style="font-size: 13px;color:white;"></div>

            </div>
            <!-- 设置按钮 -->
            <div>
                <img src="./static/setting.png" style="width:25px;height:25px"/>
            </div>
        </div>
        </div>
        
        <!-- 我的提货定单 -->
        <div style="padding: 0 20px;position: relative;margin-top: -50px;">
        <div style="display: flex;flex-direction: column;background-image: url(./static//myOrderBg.png);height: 120px;background-size: 100% 100%;background-repeat: no-repeat;">
            <div style="font-size:17px;height: 50px;line-height: 50px; text-align: center;color:white">
                我的提货定单
            </div>
            <div style="display: flex;flex:1;flex-direction: row;margin-top: 10px;">
                <div class="count-item border-right">
                    待确认
                    <div id="DQR"></div>
                </div>
                <!-- <div class="border-right"/> -->
                <div class="count-item border-right">
                    已确认
                    <div id="YQR"></div>
                </div>
                <!-- <div class="border-right"/> -->
                <div class="count-item">
                    全部
                    <div id="QB"></div>
                </div>
            </div>
        </div>
        </div>
        <!-- 菜单列表 -->
        <div style="margin-top: 14px;">
            <div onclick="toMyInfo()" style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;background-color: white;padding: 15px 20px;border-bottom: 1px solid rgb(244, 244, 244);">
                <div style="display: flex;flex: 1;">
                    <img src="./static/1@2x.png" style="width: 20px;height: 20px;"/>
                    <div style="font-size: 16px;margin-left: 10px;">个人信息</div>
                </div>
                <div style="display: flex;max-width:100px;align-items: center;">
                    <div style="display: none;margin-right:10px;padding: 4px 6px;background-color: rgb(229,86,77);color: white;border-radius: 12px;"></div>
                    <img src="./static/right.png" style="width: 16px;height: 16px;"/>
                </div>
            </div>
            <div onclick="toCompanyList()" style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;background-color: white;padding: 15px 20px;border-bottom: 1px solid rgb(244, 244, 244);">
                <div style="display: flex;flex: 1;">
                    <img src="./static/2@2x.png" style="width: 20px;height: 20px;"/>
                    <div style="font-size: 16px;margin-left: 10px;">授权公司列表</div>
                </div>
                <div style="display: flex;max-width:100px;align-items: center;">
                    <div id="sqgs" style="display: none;margin-right:10px;padding: 4px 6px;background-color: rgb(229,86,77);color: white;border-radius: 12px;"></div>
                    <img src="./static/right.png" style="width: 16px;height: 16px;"/>
                </div>
            </div>
            <div onclick="toAddCommand()" style="margin-top: 14px;display: flex;flex-direction: row;align-items: center;justify-content: space-between;background-color: white;padding: 15px 20px;border-bottom: 1px solid rgb(244, 244, 244);">
                <div style="display: flex;flex: 1;">
                    <img src="./static/mine_list.png" style="width: 20px;height: 20px;"/>
                    <div style="font-size: 16px;margin-left: 10px;">新增提货指令</div>
                </div>
                <div style="display: flex;max-width:100px;align-items: center;">
                    <div style="display: none;margin-right:10px;padding: 4px 6px;background-color: rgb(229,86,77);color: white;border-radius: 12px;"></div>
                    <img src="./static/right.png" style="width: 16px;height: 16px;"/>
                </div>
            </div>
            <div onclick="toCommandList()" style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;background-color: white;padding: 15px 20px;border-bottom: 1px solid rgb(244, 244, 244);">
                <div style="display: flex;flex: 1;">
                    <img src="./static/3.png" style="width: 20px;height: 20px;"/>
                    <div style="font-size: 16px;margin-left: 10px;">提货指令列表</div>
                </div>
                <div style="display: flex;max-width:100px;align-items: center;">
                    <div id="thzl"style="display: none;margin-right:10px;padding: 4px 6px;background-color: rgb(229,86,77);color: white;border-radius: 12px;"></div>
                    <img src="./static/right.png" style="width: 16px;height: 16px;"/>
                </div>
            </div>
            <div onclick="toAllow()" style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;background-color: white;padding: 15px 20px;border-bottom: 1px solid rgb(244, 244, 244);">
                <div style="display: flex;flex: 1;">
                    <img src="./static/5@2x.png" style="width: 20px;height: 20px;"/>
                    <div style="font-size: 16px;margin-left: 10px;">允许提货列表</div>
                </div>
                <div style="display: flex;max-width:100px;align-items: center;">
                    <div id="yxth" style="display: none;margin-right:10px;padding: 4px 6px;background-color: rgb(229,86,77);color: white;border-radius: 12px;"></div>
                    <img src="./static/right.png" style="width: 16px;height: 16px;"/>
                </div>
            </div>
            <div onclick="toConfirmList()" style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;background-color: white;padding: 15px 20px;border-bottom: 1px solid rgb(244, 244, 244);">
                <div style="display: flex;flex: 1;">
                    <img src="./static/mine_check.png" style="width: 20px;height: 20px;"/>
                    <div style="font-size: 16px;margin-left: 10px;">收货确认列表</div>
                </div>
                <div style="display: flex;max-width:100px;align-items: center;">
                    <div style="display: none;margin-right:10px;padding: 4px 6px;background-color: rgb(229,86,77);color: white;border-radius: 12px;" id="shqr"></div>
                    <img src="./static/right.png" style="width: 16px;height: 16px;"/>
                </div>
            </div>
        </div>
        <div>

        </div>
    </body>
</html>